function show() {
    var mapDiv = document.getElementById('map');
    var btnSearch = document.getElementById("btnSearch");
    var btnReset = document.getElementById("btnReset");
    var btnNavigator = document.getElementById("btnNavigator");
    var btnMylocate = document.getElementById("btnMyLocate");
    var txtSearch = "";
    var geocoder = new google.maps.Geocoder();
    var bounds = new google.maps.LatLngBounds();
    var opNearSearch = document.getElementById("opsNearSearch");
    var opStart = document.getElementById("opsStart");
    var opEnd = document.getElementById("opsEnd");
    var btnNear = document.getElementById("btnNearSearch");
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: "#8b0013" } });
    var inforwindow;
    var markers = [];
    var options = {
        center: new google.maps.LatLng(10.0341527, 105.7564947, 13), //Vị trí trung tâm Cần Thơ
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position: google.maps.ControlPosition.BOTTOM_RIGHT
        },
        scaleControl: true
    };
    var map = new google.maps.Map(mapDiv, options);
    clickButtonSearch();
    clickButtonReset();
    clickButtonNearSearch();
    clickButtonNavigator();
    clickButtonMylocate();
    clickSearch();

    function clickButtonMylocate() {
        btnMylocate.onclick = function () {
            getLocation();
        }
    }

    function clickButtonSearch() {
        btnSearch.onclick = function () {
            txtSearch = document.getElementById("txtSearch").value;
            validator();
        }
    }

    function clickButtonReset() {
        btnReset.onclick = function () {
            removeMarkers();
            clearOption(opNearSearch);
            clearOption(opStart);
            clearOption(opEnd);
            clearRoute();
        }
    }

    function clickButtonNearSearch() {
        btnNear.onclick = function () {
            var position = opNearSearch.options[opNearSearch.selectedIndex].value;
            if (position !== "chọn") {
                nearSearch(position);
            }
            else {
                alert("Vui lòng chọn một địa điểm cần tìm kiếm!");
            }
        }
    }

    function clickButtonNavigator() {
        btnNavigator.onclick = function () {
            var positionStart = opStart.options[opStart.selectedIndex].value;
            var positionEnd = opEnd.options[opEnd.selectedIndex].value;
            if (positionStart !== "chọn" && positionEnd !== "chọn")
            {
                calcRoute(positionStart, positionEnd);
            }
            else {
                alert("Vui lòng chọn đủ 2 địa điểm cần tìm đường!");
            }
        }
    }

    function validator() {
        txtSearch = trim(txtSearch);
        if (txtSearch === "" || txtSearch === null)
        {
            alert("Vui lòng nhập vào một địa chỉ để tìm kiếm!");
        }
        else if (isSpecial(txtSearch))
        {
            alert("Chuỗi tìm kiếm có chứa ký tự đặc biệt!");
        }
        else {
            search();
        }
    }

    function trim(str) {
        return  str.replace(/^[\s]+/, '').replace(/[\s]+$/, '').replace(/[\s]{2,}/, ' ');
    }

    function isSpecial(str) {
        var re = /^[!$&*()/#%@<>'"|\\\\^ \s]+$/;
        return str.match(re);
    }

    function search() {
        geocoder.geocode({'address': txtSearch}, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                bounds.extend(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                google.maps.event.addListener(marker, 'click', function () {
                    if (!inforwindow)
                        inforwindow = new google.maps.InfoWindow();
                    inforwindow.setContent(results[0].formatted_address);
                    inforwindow.open(map, marker);
                });
                markers.push(marker);
                map.fitBounds(bounds);
                addOption(opNearSearch, results[0].geometry.location, results[0].formatted_address);
                addOption(opStart, results[0].geometry.location, results[0].formatted_address);
                addOption(opEnd, results[0].geometry.location, results[0].formatted_address);
                //      var addr_type = results[0].types[0];
                //      autoZoom(addr_type);
            } else if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
                alert("Không có kết quả trả về!");
            } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                alert("Quá số lần tìm kiếm cho một người dùng một ngày!");
            } else if (status === google.maps.GeocoderStatus.REQUEST_DENIED) {
                alert("Yêu cầu tìm kiếm không được chấp nhận!");
            }
            else {
                alert("Yêu cầu tìm kiếm sai!");
            }
        });
    }

    function nearSearch(position) {
        position = position.replace('(', '');
        position = position.replace(')', '');
        var latlngStr = position.split(",", 2);
        var lat = parseFloat(latlngStr[0]);
        var lng = parseFloat(latlngStr[1]);
        var pos = new google.maps.LatLng(lat, lng);
        var request = {
            location: pos,
            radius: 1000, //meters
            type: ['store']
                    //  query: 'restaurant'
        };

        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
    }

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            alert("Geolocation is not supported by this browser.");
        }
    }

    function clickSearch() {
        google.maps.event.addListener(map, "click", function (e) {
            geocoder.geocode({"location": e.latLng}, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    bounds.extend(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                    google.maps.event.addListener(marker, 'click', function () {
                        if (!inforwindow)
                            inforwindow = new google.maps.InfoWindow();
                        inforwindow.setContent(results[0].formatted_address);
                        inforwindow.open(map, marker);
                    });
                    markers.push(marker);
                    map.fitBounds(bounds);
                    addOption(opNearSearch, results[0].geometry.location, results[0].formatted_address);
                    addOption(opStart, results[0].geometry.location, results[0].formatted_address);
                    addOption(opEnd, results[0].geometry.location, results[0].formatted_address);
                    //     var addr_type = results[0].types[0];
                    //     autoZoom(addr_type);
                } else if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
                    alert("Không có kết quả trả về!");
                } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    alert("Quá số lần tìm kiếm cho một người dùng một ngày!");
                } else if (status === google.maps.GeocoderStatus.REQUEST_DENIED) {
                    alert("Yêu cầu tìm kiếm không được chấp nhận!");
                }
                else {
                    alert("Yêu cầu tìm kiếm sai!");
                }
            });
        });
    }

    function showPosition(position) {
        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(pos);
        bounds.extend(pos);
        var marker = new google.maps.Marker({
            position: pos,
            map: map,
            icon: "icons/pin_green.png",
            animation: google.maps.Animation.BOUNCE,
        });
        google.maps.event.addListener(marker, 'click', function () {
            if (!inforwindow)
                inforwindow = new google.maps.InfoWindow();
            inforwindow.setContent("Tôi đang ở đây!");
            inforwindow.open(map, marker);
        });
        markers.push(marker);
        map.fitBounds(bounds);
        map.setZoom(15);
    }

    function removeMarkers() {
        if (markers) {
            for (i in markers)
                markers[i].setMap(null);
            markers.length = 0;
        }
    }

    function calcRoute(posStart, posEnd) {

        posStart = posStart.replace('(', '');
        posStart = posStart.replace(')', '');
        var latlngStr = posStart.split(",", 2);
        var lat = parseFloat(latlngStr[0]);
        var lng = parseFloat(latlngStr[1]);
        var start = new google.maps.LatLng(lat, lng);

        posEnd = posEnd.replace('(', '');
        posEnd = posEnd.replace(')', '');
        var latlngStr = posEnd.split(",", 2);
        var lat = parseFloat(latlngStr[0]);
        var lng = parseFloat(latlngStr[1]);
        var end = new google.maps.LatLng(lat, lng);

        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (result, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
            }
        });
        directionsDisplay.setMap(map);
    }

    function addOption(ops, position, string) {
        var opt = document.createElement('option');
        opt.value = position;
        opt.innerHTML = string;
        ops.appendChild(opt);
    }

    function clearRoute()
    {
        if (directionsDisplay !== null) {
            directionsDisplay.setDirections({routes: []});
        }
    }

    function clearOption(ops) {
        var length = ops.options.length;
        for (i = 1; i < length; i++) {
            ops.options[i] = null;
        }
        ops.options[0].selected = true;
    }

    function callback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                var marker = new google.maps.Marker({
                    map: map,
                    place: {
                        placeId: results[i].place_id,
                        location: results[i].geometry.location
                    },
                    icon: "icons/flag_green.png"
                });
                (function (i, marker) {
                    google.maps.event.addListener(marker, 'click', function () {
                        if (!inforwindow)
                            inforwindow = new google.maps.InfoWindow();
                        inforwindow.setContent(results[i].name);
                        inforwindow.open(map, marker);
                    });
                    markers.push(marker);
                })(i, marker);
                ;
            }
        }
    }

    function autoZoom(type)
    {
        var zoom = 14;
        switch (type)
        {
            case 'administrator_area_level_1':
                zoom = 6;
                break;
            case 'locality':
                zoom = 10;
                break;
            case 'street_address':
                zoom = 10;
                break;
        }
        map.setZoom(zoom);
    }
}